<template>
    <div class="approvalProcess">
        <div class="item" v-for="(item,index) in processList" v-bind:key="index">
            <div class="title">{{item.nodeName}}</div>
            <div class="content">
                <div class="info">
                    <span class="role">{{ userType[item.userType].label }}</span>
                    <span>{{ item.userName }}</span>
                    <span>{{ item.timeCreate | dateYMDHMSFormat }}</span>
                </div>
                <div :class='item.nodeStatus == 1 ? "spot pass":item.nodeStatus == 2?"spot refuse":"spot"'>{{ item.nodeStatus == 2 ? "驳回" : "" }} {{ item.nodeComments }}</div>
            </div>
        </div>
        <div class="item" v-if="status == 2  && !isView">
            <div class="title">{{approveBlock.title}}</div>
            <div class="content">
                <div class="info">
                    <span class="role">{{approveBlock.role}}</span>
                    <span>{{approveBlock.roleUser}}</span>
                    <span></span>
                </div>
                <div class="spot">待审批</div>
                <div class="slotBox">
                    <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="80px" label-position="top">
                        <el-form-item label="选择审批意见" prop="flag">
                            <el-radio-group v-model="ruleForm.flag" @change="flagChange">
                                <el-radio :label="true">{{status != 6?"通过":"确认还款"}} </el-radio>
                                <el-radio :label="false">{{status != 6?"驳回":"未还款"}}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <div class="rejectionBlock" v-if="ruleForm.flag === false">
                            <el-form-item label="驳回原因：" style="width:322px" prop="rejection">
                                <el-input v-model="ruleForm.rejection"></el-input>
                            </el-form-item>
                        </div>

                    </el-form>
                    <div class="actions">
                        <el-button type="primary" @click="handleApprove(status)">确定</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import { userType } from "@/utils/status.js";
export default {
    components: {},
    data () {
        return {
            rules: {
                flag: [{ required: true, message: "请选择审批意见", trigger: "blur" }],
                rejection: [{ required: true, message: "请填写驳回原因", trigger: "blur" }],
            },
            ruleForm: {
                flag: "",
                rejection: "",
            },
            loading: false,
            processList: [],
            userType: userType,
            approveBlock: {
                title: ""
            }
        };
    },
    props: {
        isView: {
            type: Boolean,
            default: true
        },
        status: {
            type: Number,
            default: 0
        },
        id: {
            type: String,
            default: ""
        },
        form: {
            type: Object,
            default: () => { }
        }
        // bank: {
        //     type: String,
        //     default: ""
        // },
        // depositId: {
        //     type: String,
        //     default: ""
        // }
    },

    watch: {
        status (newStr, oldStr) {
            switch (newStr) {
                case 2:
                    this.approveBlock.title = "平台审批";
                    this.approveBlock.role = "平台";
                    this.approveBlock.roleUser = JSON.parse(localStorage.getItem("user")).username;
                    break;
                // case 5:
                // case 6:
                //     this.approveBlock.title = "银行审批";
                //     this.approveBlock.role = "银行";
                //     this.approveBlock.roleUser = this.bank
                //     break;
            }
        }
    },
    mounted () {

    },

    methods: {
        flagChange (e) {
            if (e) {
                this.rejection = ""
            }
        },
        getFlowsList () {
            let params = {
                id: this.id,
                business: 4
            };
            this.$get({ url: "/flows/list", params }).then(res => {
                this.processList = res

            })
        },
        //审批
        handleApprove (status) {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.$confirm("是否确认该审批结果?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }).then(() => {
                        let data = {
                            id: this.id,
                            flag: this.ruleForm.flag,
                            operator: this.approveBlock.roleUser,
                            rejection: this.ruleForm.rejection,
                        };
                        let url = ""
                        switch (status) {
                            case 2:

                                if (this.form.bank == "" || this.form.company == "") {
                                    this.$message.warning("请选择收款银行和签订合同企业");
                                    return;
                                }
                                url = "/buyerOrderList/approval/platform";
                                data.platformBankId = this.form.bank;
                                data.platformCompanyId = this.form.company
                                break;

                        }
                        this.$emit("isLoading", true)
                        this.$post({
                            url: url,
                            data,
                        }).then(
                            () => {
                                this.$message.success("审批成功");
                                this.getFlowsList()
                                this.$emit("isLoading", false)
                                this.$emit("getInfo")
                            },
                            () => {
                                this.$emit("isLoading", false)
                            }
                        );
                    })
                }
            })

        },
    },
};
</script>
<style scoped lang="scss">
.item {
    padding-left: 26px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    position: relative;
    margin-bottom: 16px;
    .title {
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
    }
    .content {
        background: rgba(0, 0, 0, 0.02);
        width: 712px;
        padding: 16px;
        margin-top: 8px;
        span {
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
            line-height: 22px;
            &.role {
                color: rgba(0, 0, 0, 0.85);
            }
        }
        .info {
            margin-bottom: 4px;
            div {
                line-height: 26px;
            }
        }
        .spot {
            color: #52c41a;
            &.pass {
                color: #3a85f5;
            }
            &.refuse {
                color: #f56c6c;
            }
        }
    }
    &::after {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: #3a85f5;
        top: 6px;
        border-radius: 300px;
        left: 0;
    }
    &::before {
        content: "";
        position: absolute;
        background: #3a85f5;
        width: 1px;
        bottom: -19px;
        left: 4px;
        top: 20px;
    }
    &:last-child {
        &::before {
            content: none;
        }
    }
    .slotBox {
        margin-top: 16px;
        .slotTitle {
            margin-bottom: 8px;
        }
        .actions {
            margin-top: 24px;
        }
    }
    .rejectionBlock {
        width: 632px;
        background: #ffffff;
        border-radius: 2px;
        margin-top: 20px;
        padding: 10px 24px;
        .el-form-item,
        .el-date-editor--daterange.el-input,
        .el-date-editor--daterange.el-input__inner,
        .el-date-editor--timerange.el-input,
        .el-date-editor--timerange.el-input__inner {
            width: 322px;
        }
    }
}
</style>
